<template>

        <el-card class="box-card">
			<div class="box">
            <div class="form-box">
                <el-form ref="formRef" :rules="rules" :model="form" label-width="120px">
                    <el-form-item label="家庭状况描述" prop="mark">
                        <el-input type="textarea" rows="5" v-model="form.mark"></el-input>
                    </el-form-item>
                    <el-form-item label="困难证明" prop="imgUrl">
					<!-- 材料上传 -->
                    <el-upload class="upload-demo"
					drag
					:http-request="onImport"
					:show-file-list="showfile.flag"
					accept=".jpg,.png">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 5MB</div>
						<div class="el-upload__tip">上传较慢，请耐心等待</div>
                    </template>
                    </el-upload>
					<!--  -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button @click="onReset">重置表单</el-button>
                    </el-form-item>
                </el-form>
            </div>
			</div>
        </el-card>

</template>

<script>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import request from '../../utils/request'

export default {
	data() {
		return {
			flag: 1,
			name: {
				userName: ''
			},
			userInfo: {},
		}
	},
	setup() {
		const rules = {
			mark: [
				{ required: true, message: '请描述家庭状况', trigger: 'blur' },
				{
					max: 100,
					message: '长度需要在100以下',
					trigger: 'blur',
				},
			],
			imgUrl: [
				{ required: true, message: '请上传困难证明', trigger: 'blur' },
			],
		};
		const formRef = ref(null);
		const form = reactive({
			imgUrl: '',
			mark: '',
			userName: '',
		});
		const name = {
			userName: ''
		}
		const showfile = reactive({
			flag: false
		})
		// 提交
		const onSubmit = () => {
			// 表单校验
			// eslint-disable-next-line consistent-return
			formRef.value.validate((valid) => {
				if (valid) {
					console.log(form);
					name.userName = form.userName
					request.post('/api/lesspay/flag',name).then(res => {
						if (res.data === 2) {
							request.post('/api/lesspay/do',form)
							ElMessage.success('提交成功！');
						} else {
							ElMessage.error('您已提交,请耐心等待审核');
						}
					})
				} else {
					return false;
				}
			});
		};
		// 重置
		const onReset = () => {
			formRef.value.resetFields();
			showfile.flag = false
		};

		return {
			rules,
			formRef,
			form,
			onSubmit,
			onReset,
			showfile,
		};
	},
	created() {
		this.getUserInfo();
	},
	methods: {
		// 获取学号
		getUserInfo() {
			request.get('/api/user/selectSelfInformation',
		    {
		        headers: {'jwtToken': this.$store.getters.getToken}
	        }).then(res => {
			    this.userInfo = res.data;
		    })
		},
		// 上传图片
		// eslint-disable-next-line consistent-return
		onImport({ file }) {
			let isImage = ['png','jpg']
			let form1 = new FormData()
			let arr = file.name.split('.')
			let suffix = arr[arr.length - 1]
			if (isImage.indexOf(suffix) === -1) {
				return this.$message.error('文件格式错误')
			}
			form1.append('image', file)
			form1.append('apiType', 'ai58')
			form1.append('token', '4527cb930f5f2baad456c49c75692fc0')
			request.post('/image',form1).then((res) => {
				let { code, data } = res
				if (code === 200) {
					this.$message.success('上传成功')
					this.form.imgUrl = data.url.ai58
					this.form.userName = this.userInfo.userName
					this.showfile.flag = true
				} else {
					this.$message.error('上传失败')
				}
			})
		},
	}
};
</script>

<style scoped>
.container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form-box {
    width: 70%;
}
.box {
    width: 800px;
	height: 600px;
}
.box-card {
    height: 100%;
}

</style>
